<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="lib/bootstrap-4.2.1-dist/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="lib/font-awesome-4.7.0/css/font-awesome.min.css" />
    <link rel="stylesheet" type="text/css" href="css/layout.css" />
    <link rel="stylesheet" type="text/css" href="css/menu.css" />
</head>

<body>
    <nav class="navbar p-0">
        <a class="navbar-brand py-0" href="javascript:void(0);">
            <img src="images/logo.jpg" />
        </a>
        <ul class="navbar-nav flex-row ml-auto">
            <li class="nav-item">
                <a class="nav-link" href="javascript:void(0);">
                    <i class="fa fa-envelope-o"></i>
                    <span class="badge badge-secondary">10</span>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="javascript:void(0);">
                    <i class="fa fa-home"></i>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link">
                    <span class="splitter"></span>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="javascript:void(0);" id="admin_dropdown_button" data-toggle="dropdown">
                    admin
                    <img class="rounded-circle" src="images/avatar.jpg" />
                    <i class="fa fa-caret-down"></i>
                </a>
                <div class="dropdown-menu position-absolute admin-menu-dropdown" aria-labelledby="admin_dropdown_button">
                    <a class="dropdown-item" href="javascript:void(0);">
                        <i class="fa fa-user-o"></i>
                        个人中心
                    </a>
                    <a class="dropdown-item" href="javascript:void(0);">
                        <i class="fa fa-sign-out"></i>
                        退出登录
                    </a>
                </div>
            </li>
        </ul>
    </nav>
    <div class="content-wrapper">
        <div class="side-bar">
            <nav class="nav flex-column root-nav">
                <li class="nav-item on">
                    <a class="nav-link" href="javascript:void(0);">
                        <i class="fa fa-navicon"></i> 链接1
                        <i class="fa fa-chevron-down"></i>
                    </a>
                    <nav class="nav flex-column sub-nav">
                <li class="nav-item">
                    <a class="nav-link" href="javascript:void(0);">
                        <i class="fa fa-list"></i> 子链1
                        <i class="fa fa-angle-left"></i>
                    </a>
                    <nav class="nav flex-column sub-sub-nav">
                <li class="nav-item">
                    <a class="nav-link" href="javascript:void(0);">
                        <i class="fa fa-caret-right"></i> 孙子链1
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="javascript:void(0);">
                        <i class="fa fa-caret-right"></i> 孙子链2
                    </a>
                </li>
            </nav>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="javascript:void(0);">
                    <i class="fa fa-list"></i> 子链2
                    <i class="fa fa-angle-left"></i>
                </a>
                <nav class="nav flex-column sub-sub-nav">
            <li class="nav-item">
                <a class="nav-link" href="javascript:void(0);">
                    <i class="fa fa-caret-right"></i> 孙女链1
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="javascript:void(0);">
                    <i class="fa fa-caret-right"></i> 孙女链2
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="javascript:void(0);">
                    <i class="fa fa-caret-right"></i> 孙女链2
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="javascript:void(0);">
                    <i class="fa fa-caret-right"></i> 孙女链2
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="javascript:void(0);">
                    <i class="fa fa-caret-right"></i> 孙女链2
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="javascript:void(0);">
                    <i class="fa fa-caret-right"></i> 孙女链2
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="javascript:void(0);">
                    <i class="fa fa-caret-right"></i> 孙女链2
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="javascript:void(0);">
                    <i class="fa fa-caret-right"></i> 孙女链2
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="javascript:void(0);">
                    <i class="fa fa-caret-right"></i> 孙女链2
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="javascript:void(0);">
                    <i class="fa fa-caret-right"></i> 孙女链2
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="javascript:void(0);">
                    <i class="fa fa-caret-right"></i> 孙女链2
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="javascript:void(0);">
                    <i class="fa fa-caret-right"></i> 孙女链2
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="javascript:void(0);">
                    <i class="fa fa-caret-right"></i> 孙女链2
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="javascript:void(0);">
                    <i class="fa fa-caret-right"></i> 孙女链2
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="javascript:void(0);">
                    <i class="fa fa-caret-right"></i> 孙女链2
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="javascript:void(0);">
                    <i class="fa fa-caret-right"></i> 孙女链2
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="javascript:void(0);">
                    <i class="fa fa-caret-right"></i> 孙女链2
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="javascript:void(0);">
                    <i class="fa fa-caret-right"></i> 孙女链2
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="javascript:void(0);">
                    <i class="fa fa-caret-right"></i> 孙女链2
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="javascript:void(0);">
                    <i class="fa fa-caret-right"></i> 孙女链2
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="javascript:void(0);">
                    <i class="fa fa-caret-right"></i> 孙女链2
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="javascript:void(0);">
                    <i class="fa fa-caret-right"></i> 孙女链2
                </a>
            </li>
            </nav>
            </li>
            </nav>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="javascript:void(0);">
                    <i class="fa fa-navicon"></i> 链接2
                    <i class="fa fa-chevron-left"></i>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="javascript:void(0);">
                    <i class="fa fa-navicon"></i> 链接3
                    <i class="fa fa-chevron-left"></i>
                </a>
            </li>
            </nav>
        </div>
        <div class="content"></div>
    </div>
    <footer>
        公司名称：合肥携稳智能科技有限公司&nbsp;&nbsp;&nbsp;&nbsp;服务电话：400-1627-588&nbsp;&nbsp;&nbsp;&nbsp;电子邮件：hd361588@163.com
    </footer>

    <div class="fixed-top">
        <div class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-autohide="false">
            <div class="toast-header">
                <strong class="mr-auto">弹窗标题</strong>
                <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="toast-body">
                弹窗内容
            </div>
        </div>
    </div>

    <script src="lib/jquery/jquery-3.3.1.min.js"></script>
    <script src="lib/bootstrap-4.2.1-dist/js/bootstrap.min.js"></script>
    <script src="js/menu.js"></script>
    <script>
        $('.toast').toast();
    </script>
</body>

</html>